<template>
    <a-row :gutter="RowGutter">
        <template v-for="(item, index) in ColArray">
            <a-col :span="item" v-if="viewObj['Col_' + index]">
                <slot :name="'Col_' + index"></slot>
            </a-col>
        </template>
    </a-row>
</template>

<script setup>
import { onMounted, onUpdated, ref, useSlots } from 'vue';
const Slots = useSlots();

const ColArray = ref([12, 12, 12]);
const RowGutter = ref(16);

const viewObj = ref({})
for (let i = 0; i < ColArray.value.length; i++) {
    viewObj['Col_' + i] = true
}

const RenderView = () => { 
    for (const key in viewObj) {
        viewObj.value[key] = Slots.hasOwnProperty(key)
    }
}

onMounted(RenderView)
onUpdated(RenderView)


</script>
<style lang="less" scoped></style>